import React, { useEffect, useState } from 'react'
/* 编辑器 */
import Editor from 'for-editor';

/* 引入antd */
import { Input, Select, Button, Form } from 'antd';
/* 引入上下文 */
import useStore from '../../../context/useStore';

import { useObserver } from 'mobx-react-lite';

const { Option } = Select;

const AddQuestions: React.FC = (props:any) => {

    const { questions, user } = useStore();

    /* 保存用户id */
    let user_id= user.userInfo.identity_id;

    const [formData,setFormData]=useState<any>({});

    useEffect(() => {
        /* 获取所有的试题类型 */
        questions.getQuestionsTypeAction();
        /* 获取所有的课程 */
        questions.getSubjectListAction();
        /* 获取所有的考试类型 */
        questions.getExamTypeAction();
    }, [questions])

    
    const onFinish = (values: any) => {
        console.log('页面。。。',{...values.user,user_id});
        /* let data={...values.user,user_id}; */
        setFormData({...values.user,user_id});
        console.log('====================================');
        console.log('finish..',formData);
        console.log('====================================');
        /*     let questions_type_id=formData.questions_type_id;
        let questions_stem=formData.questions_stem;
        let subject_id=formData.subject_id;
        let exam_id=formData.exam_id;
        let user_id=formData.user_id;
        let questions_answer=formData.questions_answer;
        let title=formData.title; */

        /* 调用添加试题接口 */
        
       /*  questions.addQuestionsAction({...values.user,user_id}); */
         /* 获取所有的试题 */
        /*  questions.getQuestionsListAction(); */
    };

    /* 样式布局 */
    const layout = {
        labelCol: { span: 2 },
        wrapperCol: { span: 16 },
    };

    /* 验证 */
    const validateMessages = {
        required: `${'label'} is required!`,
        types: {
            email: `${'label'}`,
            number: `${'label'} is not a validate number!`,
        },
        number: {
            range: `${'label'} must be between ${'min'} and ${'max'}`,
        },
    };


    return useObserver(() => <div>
        <h2>
        {/* < FormattedMessage id={getTitle(props.location.pathname)} defaultMessage={getTitle(props.location.pathname)} ></FormattedMessage > */}
        </h2>
      
        <div className='main'>
            <p>题目信息</p>
            <p>题干</p>
            <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
                <Form.Item name={['user', 'title']} rules={[{pattern: /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/, required: true,message: '请输入试卷名称!' }]} >
                    <Input placeholder="请输入名称" />
                </Form.Item>
                <p>题目主题</p>
                <Form.Item name={['user', 'questions_stem']}>
                <Editor height='300px' ></Editor>
                </Form.Item>
                <p>请选择考试类型：</p>
                <Form.Item
                    name={['user', 'exam_id']}
                    hasFeedback
                    rules={[{ required: true, message: '请选择考试类型!' }]}
                >
                    <Select style={{ width: 120 }} >
                        {
                            questions.examTypeList.map((item: any) => {
                                /* console.log('考试类型。。', item); */
                                return <Option value={item.exam_id} key={item.exam_id}>{item.exam_name}</Option>
                            })
                        }
                    </Select>
                </Form.Item>

                <p>请选择课程类型：</p>
                <Form.Item
                    name={['user', 'subject_id']}
                    hasFeedback
                    rules={[{ required: true, message: '请选择课程类型!' }]}
                >
                    <Select style={{ width: 120 }} >
                        {
                            questions.subjectList.map((item: any) => {
                               /*  console.log('课程类型。。。', item); */
                                return <Option value={item.subject_id} key={item.subject_id}>{item.subject_text}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <p>请选择题目类型：</p>
                <Form.Item
                    name={['user', 'questions_type_id']}
                    hasFeedback
                    rules={[{ required: true, message: '请选择题目类型!' }]}
                >
                    <Select style={{ width: 120 }} >
                        {
                            questions.questionsTypeList.map((item: any) => {
                                /* console.log('题目类型。。。', item); */
                                return <Option value={item.questions_type_id} key={item.questions_type_id}>{item.questions_type_text}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <h3>答案信息</h3>
                <Form.Item name={['user', 'questions_answer']}>
                    <Editor height='300px' ></Editor>
                </Form.Item>
                {/* 按钮 */}
                <Form.Item style={{marginTop:20}} >
                    <Button type="primary" htmlType="submit">提交</Button>
                </Form.Item>
            </Form>
        </div>
    </div>
    )
}
export default AddQuestions;